<template>
    <div class="pages-wrap">
      <scroll-view class="content">
        <template>
        <div class="page" ref="scroll">
          <mineheader/>
              <!-- 订单 -->
          <myorder/>
              <!-- 菜单选项 -->
          <minemenu :menuInfo="menuInfo" />
              <!-- 关于 -->
          <div class="about">
              <button @click="exitAction">退出登录</button>
          </div>
        </div>
        </template>
      </scroll-view>
      <router-view></router-view>
    </div>
</template>

<script>
import { Toast } from 'vant'
import MineHeader from './start/Mine-header.vue'
import Minemenu from './start/Mine-menu.vue'
import MyOrder from './start/Mine-order.vue'
export default {

  components: { 
    [MineHeader.name]:MineHeader,
    [MyOrder.name]: MyOrder,
    [Minemenu.name]:Minemenu
   },
  name: "mine-page",
  data() {
    return {
      menuInfo: [
        {
        id: 1,
        name:"userinfo",
        info:"个人资料"
        },
        {
          id: 2,
           name:"modifyPsw",
        info:"修改密码"
        },
        {
          id: 3,
            name:"myhomeinfo",
        info:"我的房源信息"
        },
        {
          id: 4,
            name:"hashandload",
        info:"成为房东"
        },
        {
          id: 5,
            name:"mypack",
        info:"我的钱包"
        },
        {
          id: 6,
            name:"mysale",
        info:"我的优惠券"
        },
        {
          id: 7,
            name:"msgcenter",
        info:"消息中心"
        },
        {
          id: 8,
            name:"useroption",
        info:"意见反馈"
        },
        {
          id: 9,
            name:"about",
        info:"关于"
        },
      ],
    }
  },
  methods: {
    menuAction(ev, id) {
      //获得点击元素的子元素
      const text = ev.currentTarget.firstElementChild.innerText
      const name = ev.currentTarget.firstElementChild.getAttribute("name")
      this.$router.push({
        path: `${name}`, 
        query:{text}
      })
    },
    //退出登录
    exitAction() {
      //清除token，跳转登录页
      localStorage.removeItem("token");
      localStorage.removeItem("lslist")
      this.$router.push({
        path:"/login"
      })
      Toast("退出成功")
    }
  },
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 50px;
  overflow: hidden;
.page{
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  bottom: 50px;
     .about{
      display: flex;
      justify-content: center;
      padding: 15px;
        button{
        width: 274px;
        height: 44px;
        text-align: center;
        background-color: #fff;
        color: #4A73FF;
        border: 1px #4A73FF solid;
        border-radius: 5px;
      }
     }
  }
}
</style>